<template>
  <div class="ordinary">
    <el-steps :active="activeStep" finish-status="success" align-center>
      <el-step title="必填信息" @click="setStep(0)"></el-step>
      <el-step title="个人描述需求" @click="setStep(1)"></el-step>
    </el-steps>

<!--    <el-form :model="form" ref="formRef" label-width="100px" v-if="activeStep === 0" class="form-step" :rules="rules">-->
<!--      <el-form-item label="公司规模" prop="company_scale">-->
<!--        <el-select v-model="form.companyScale" placeholder="不限" clearable>-->
<!--          <el-option label="不限" value="不限"></el-option>-->
<!--          <el-option label="0-20人" value="0-20人"></el-option>-->
<!--          <el-option label="20-99人" value="20-99人"></el-option>-->
<!--          <el-option label="100-499人" value="100-499人"></el-option>-->
<!--          <el-option label="500-999人" value="500-999人"></el-option>-->
<!--          <el-option label="1000-9999人" value="1000-9999人"></el-option>-->
<!--          <el-option label="10000人以上" value="10000人以上"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="职位类型" prop="job_type">-->
<!--        <el-select v-model="form.jobType" placeholder="全职" clearable>-->
<!--          <el-option label="全职" value="全职"></el-option>-->
<!--          <el-option label="兼职" value="兼职"></el-option>-->
<!--          <el-option label="不限" value="不限"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="薪资" prop="salary">-->
<!--        <el-select v-model="form.salary" placeholder="不限" clearable>-->
<!--          <el-option label="不限" value="不限"></el-option>-->
<!--          <el-option label="3k以下" value="3k以下"></el-option>-->
<!--          <el-option label="3-5k" value="3-5k"></el-option>-->
<!--          <el-option label="5-10k" value="5-10k"></el-option>-->
<!--          <el-option label="10-20k" value="10-20k"></el-option>-->
<!--          <el-option label="20-50k" value="20-50k"></el-option>-->
<!--          <el-option label="50k以上" value="50k以上"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="工作年限" prop="job_year">-->
<!--        <el-select v-model="form.jobYear" placeholder="不限" clearable>-->
<!--          <el-option label="不限" value="不限"></el-option>-->
<!--          <el-option label="在校生" value="在校生"></el-option>-->
<!--          <el-option label="应届生" value="应届生"></el-option>-->
<!--          <el-option label="经验不限" value="经验不限"></el-option>-->
<!--          <el-option label="1年以内" value="1年以内"></el-option>-->
<!--          <el-option label="1-3年" value="1-3年"></el-option>-->
<!--          <el-option label="3-5年" value="3-5年"></el-option>-->
<!--          <el-option label="5-10年" value="5-10年"></el-option>-->
<!--          <el-option label="10年以上" value="10年以上"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="学历" prop="educational">-->
<!--        <el-select v-model="form.educational" placeholder="不限" clearable>-->
<!--          <el-option label="不限" value="不限"></el-option>-->
<!--          <el-option label="初中及以下" value="初中及以下"></el-option>-->
<!--          <el-option label="中专/中技" value="中专/中技"></el-option>-->
<!--          <el-option label="高中" value="高中"></el-option>-->
<!--          <el-option label="大专" value="大专"></el-option>-->
<!--          <el-option label="本科" value="本科"></el-option>-->
<!--          <el-option label="硕士" value="硕士"></el-option>-->
<!--          <el-option label="博士" value="博士"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button type="primary" @click="nextStep">下一步</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->

    <el-form :model="form" ref="formRef" label-width="100px" v-if="activeStep === 0" class="form-step" :rules="rules">
      <el-form-item label="城市" prop="city">
        <el-input v-model="form.city" placeholder="厦门/集美" clearable ></el-input>
      </el-form-item>
      <el-form-item label="喜欢的岗位" prop="like_job">
        <el-input v-model="form.likeJob" placeholder="软件测试（厦门）" clearable ></el-input>
      </el-form-item>
<!--      <el-form-item label="关键词" prop="job_keywords">-->
<!--        <el-input v-model="form.jobKeywords" placeholder="软件测试, JAVA开发" @input="handleKeywordsInput($event)" clearable ></el-input>-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button @click="prevStep">上一步</el-button>
        <el-button type="primary" @click="nextStep">下一步</el-button>
      </el-form-item>
    </el-form>

    <el-form :model="form" ref="formRef" label-width="100px" v-if="activeStep === 1" class="form-step" :rules="rules">
      <el-form-item label="求职期望" prop="user_job_expect">
        <el-input type="textarea" v-model="form.userJobExpect"
                  placeholder="我想找一个JAVA开发或者测试开发的岗位，然后月薪的话三千以上就行，我会的技术主要有微服务，有几段大厂实习经历，请帮我进行简历投递"
                  clearable show-word-limit maxlength="200" rows="5"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="prevStep">上一步</el-button>
        <el-button type="primary" @click="submitForm">筛选岗位</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>


<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import UserDemandAi from "./user-demand-ai.vue";

const formRef = ref(null);
const form = ref({
  city: '',
  jobType: '',
  salary: '',
  jobYear: '',
  educational: '',
  industry: '',
  companyScale: '',
  likeJob: '',
  analysisDetail: '',
  jobKeywords: [],
  userJobExpect: ''
});

const activeStep = ref(0);

const nextStep = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      activeStep.value += 1;
    } else {
      ElMessage.error('请填写所有必填字段');
    }
  });
};


const prevStep = () => {
  if (activeStep.value > 0) {
    activeStep.value -= 1;
  }
};

const rules = ref({
  city: [{ required: true, message: '城市不能为空', trigger: 'blur' }],
  jobType: [{ required: true, message: '职位类型不能为空', trigger: 'blur' }],
  salary: [{ required: true, message: '薪资不能为空', trigger: 'blur' }],
  jobYear: [{ required: true, message: '工作年限不能为空', trigger: 'blur' }],
  educational: [{ required: true, message: '学历不能为空', trigger: 'blur' }],
  industry: [{ required: true, message: '行业不能为空', trigger: 'blur' }],
  companyScale: [{ required: true, message: '公司规模不能为空', trigger: 'blur' }],
  likeJob: [{ required: true, message: '喜欢的岗位不能为空', trigger: 'blur' }],
  analysisDetail: [{ required: true, message: '分析详情不能为空', trigger: 'blur' }],
  jobKeywords: [{ required: true, message: '关键词不能为空', trigger: 'blur' }],
  userJobExpect: [{ required: true, message: '求职期望不能为空', trigger: 'blur' }]
});

const submitForm = async () => {
  console.log('进行表单校验');
  formRef.value.validate((valid: boolean) => {
    console.log('isValid', valid);
    if (!valid) {
      console.log('表单验证失败');
      ElMessage.error('检查是否是参数缺失');
      console.log('-------------');
      return false;
    }

    // 收集用户提交记录
    localStorage.setItem('jobForm', JSON.stringify(form.value));

    console.log('提交的表单数据：', JSON.stringify(form.value).toString());

    // 1.打开boss的网站
    // 2.登录 海投
    window.bossHandleApi.pauseScript(false);
    window.bossSendApi.aiSimulatedDelivery(JSON.stringify(form.value).toString());
  });
};

const setStep = (step: number) => {
  activeStep.value = step;
};

// 初始化以前的操作
// 页面初始化时处理 localStorage 中的历史数据
onMounted(async () => {
  try {
    const initData = localStorage.getItem('jobForm');
    if (initData) {
      const latestData = JSON.parse(initData);

      // 将 localStorage 中的数据应用到表单上
      form.value = {
        ...form.value,
        city: latestData.city || '',
        jobType: latestData.jobType || '',
        salary: latestData.salary || '',
        jobYear: latestData.jobYear || '',
        educational: latestData.educational || '',
        industry: latestData.industry || '',
        companyScale: latestData.companyScale || '',
        likeJob: latestData.likeJob || '',
        analysisDetail: latestData.analysisDetail || '',
        jobKeywords: latestData.jobKeywords.length > 0 ? latestData.jobKeywords : [],
        userJobExpect: latestData.userJobExpect || ''
      };

      // 设置 activeStep 为 1，跳转到第三步
      activeStep.value = 1;
    } else {
      console.log('没有找到用户历史提交的信息');
    }
  } catch (error) {
    console.error('Error loading user history:', error);
  }
});
</script>


<style scoped>
.cartoon-form {
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-step {
  margin-bottom: 20px;
}
.cartoon-form {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input, .el-select {
  width: 100% !important;
}

.el-input__inner, .el-select .el-input__inner {
  box-sizing: border-box !important;
}

.el-select .el-input__inner {
  width: 100% !important;
}

.el-button {
  font-family: 'Arial', sans-serif;
  background-color: #f0ad4e;
  border-color: #f0ad4e;
  color: #fff;
}

.el-button:hover {
  background-color: #ec971f;
  border-color: #ec971f;
}
.el-form-item {
  margin-bottom: 20px;
}
</style>

